<%@page import="domain.ContactGroup"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<title>AddContact</title>
</head>
<body>
	<!-- Header -->
	<div class="container">
		<h1 class="text-center">Modern Depiction Of Coolness</h1>
	</div>
	<!-- Header end-->
	<!-- Navigation bar -->
	<div class="container">
		<div class="navbar alert-success" role="navigation"></div>
	</div>
	<!-- Navigation bar end-->
	<!-- Body -->
	<form role="form" class="form-horizontal" method="post"
		action="AddContact">
		<div class="container">

			<!-- Left side panel -->
			<div class="container col-md-6 text-center">
				<!-- Panneau information contact -->
				<div class="panel panel-success">
					<div class="panel-heading">Contact</div>
					<div class="panel-body alert-warning">
						<div class="form-group">
							<label class="col-sm-4 control-label">Firstname</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="firstname" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Lastname</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="lastname" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Email</label>
							<div class="col-sm-8">
								<input class="form-control" type="email" name="email" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Num Siret</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="numsiret" />
							</div>
						</div>
					</div>
				</div>
				<!-- Fin information contact -->

				<!-- Panneau information adresse -->
				<div class="panel panel-success">
					<div class="panel-heading">Address</div>
					<div class="panel-body alert-warning">
						<div class="form-group">
							<label class="col-sm-4 control-label">Street</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="street" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">City</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="city" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Zip</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="zip" required>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Country</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="country" required>
							</div>
						</div>
					</div>
				</div>
				<!-- Fin information adresse -->
			</div>
			<!-- End left side panel -->

			<!-- Right side panel -->
			<div class="container col-md-6 text-center">
				<!-- Panneau information telephones -->
				<div class="panel panel-success">
					<div class="panel-heading">Phone numbers</div>
					<div class="panel-body alert-warning">
						<div class="form-group">
							<label class="col-sm-4 control-label">Mobile</label>
							<div class="col-sm-8">
								<input class="form-control" type="tel" name="tel_mobile" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Home</label>
							<div class="col-sm-8">
								<input class="form-control col-sm-8" type="tel" name="tel_home" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-4 control-label">Work</label>
							<div class="col-sm-8">
								<input class="form-control" type="tel" name="tel_work" />
							</div>
						</div>
					</div>
				</div>
				<!-- Fin information telephones -->

				<!-- Panneau information groupes -->
				<div class="panel panel-success">
					<div class="panel-heading">Contact groups</div>
					<div class="panel-body alert-warning">
						<!-- Existing groups -->
						<ul class="list-group pre-scrollable">
							<c:forEach items="${ContactGroups}" var="group">
								<li class="list-group-item"><label class="pull-left">
										<input type="checkbox" value="${group.id}"
										name="contactgroups${group.id}">
								</label>${ group.groupName }</li>
							</c:forEach>
						</ul>
						<!-- End existing groups -->
						<!-- Add new group -->
						<button class="btn btn-success pull-right" data-toggle="modal"
							data-target="#myModal">
							<span class="glyphicon glyphicon-plus"></span> Add new group
						</button>


						<!-- End new group -->
					</div>
				</div>
				<!-- Fin information groupes-->
			</div>
			<!-- End right side panel -->
		</div>

		<div class="container">
			<div class="navbar alert-success">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="LoadAllContacts">Back to main page</a></li>
				</ul>
				<div class="navbar-form navbar-right">
					<button class="btn btn-success" type="submit">
						Submit <span class="glyphicon glyphicon-ok"></span>
					</button>
					<button class="btn btn-warning" type="reset">
						Reset <span class="glyphicon glyphicon-remove"></span>
					</button>
				</div>
			</div>
		</div>
	</form>

	<div class="container">
		<!-- New group modal -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">Add a contact
							category</h4>
					</div>
					<div class="modal-body">
						<form method="post" action="AddContactGroup">
							<div class="form-group form-vertical">
								<label class="control-label col-md-2">Groupname</label>
								<div class="col-md-6">
									<input class="form-control" type="text" name="new_group" />
								</div>
								<button type="submit" class="col-md-3 btn btn-success">
									<span class="glyphicon glyphicon-plus pull-left"></span>Add new
									group
								</button>
								<input name="previous" value="addContact" type="hidden"/>
							</div>
						</form>
						<br/>
					</div>
					<div class="modal-footer"></div>
				</div>
			</div>
		</div>
		<!-- End new group modal -->
	</div>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>